import * as React from 'react';

import { ManagerClient } from '@/api/workflow';
import EPie from '@/components/ECharts/Pie';
import ELine from '@/components/ECharts/Line';

import './index.scss';

class HomeIndex extends React.PureComponent<any, any> {
    private client: ManagerClient;
    private echartPie1: EPie;
    private echartPie2: EPie;
    private echartPie3: EPie;

    private echartLine: ELine;
    constructor(props: any) {
        super(props);

    }
    public async componentDidMount() {
        console.log("home start");
        this.client = new ManagerClient();
        let rs = await this.client.getECProcessState();
        this.echartPie1.setData(rs);

        let rs2 = await this.client.getECActivityState();
        this.echartPie2.setData(rs2);

        let rs3 = await this.client.getECTaskState();
        this.echartPie3.setData(rs3);

        let rs4 = await this.client.getECProcessDateCount();
        let data = [];
        rs4.forEach(d1 => {
            let date1 = new Date(d1.name);
            let value = [[date1.getFullYear(), date1.getMonth() + 1, date1.getDate()].join('/'), d1.value];
            let obj = { name: d1.name, value };
            data.push(obj);
        });
        this.echartLine.setData(data);


    }
    public render() {
        return (
            <div style={{ width: "100%" }}>
                <div style={{ display: "flex", justifyContent: "center ", alignItems: "center" ,width: "98%"}}>
                    <EPie ref={node => this.echartPie1 = node}  height={500} title={"流程实例状态"}
                        subtitle={"状态数据"} seriesName={"数量"}
                        legendData={['准备', '运行', '完成', '挂起', '取消', "废弃"]}
                        data={[]} />
                    <EPie ref={node => this.echartPie2 = node}  height={500} title={"活动实例状态"}
                        subtitle={"状态数据"} seriesName={"数量"}
                        legendData={['准备', '运行', '完成', '挂起', '撤销', '退回', '系统内部标志取消', '人工取消终止']}
                        data={[]} />
                    <EPie ref={node => this.echartPie3 = node} height={500} title={"任务实例状态"}
                        subtitle={"状态数据"} seriesName={"数量"}
                        legendData={['等待', '办理', '完成', '撤销', '退回', '关闭', '等待其他任务']}
                        data={[]} />
                </div>
                <div style={{ marginTop: 20, display: "flex", justifyContent: "center ", alignItems: "center" ,width: "100%"}}>
                    <ELine ref={node => this.echartLine = node} title="流程实例数量每日统计" seriesName="流程数据" height={500} data={[]} />
                </div>
            </div>
        );
    }
}

export default HomeIndex;
